<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.bg {
				background-image: url(../img/welcome-1.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 100%;
				position: absolute;
				height: 100%;
				width: 100%;
			}
			
			.corner-container {
				background: rgba(255, 255, 255, 0.3);
				height: 50px;
				width: 70%;
				margin: 0px auto;
				border-radius: 50px;
				padding: 0px;
				box-shadow: 2px 2px 5px #888888, -2px -2px 5px #888888;
			}
			
			.white-color {
				color: white;
			}
			
			.margin-t-20 {
				margin-top: 20px;
			}
			
			.margin-t-40 {
				margin-top: 20px;
			}
			
			.text-size {
				font-size: 1.6rem;
			}
			
			.login-btn {
				background: rgba(255, 255, 255, 0.8);
				font-size: 2rem;
				color: #555555;
			}
			.black-color{
				color: black;
			}
			.login-btn:active {
				background: rgba(255, 255, 255, 0.3);
			}
		</style>
		
		
	</head>

	<body>
		<div class="bg flex v-center">
			<div class="fill-w">
				<div id="selectRole" style="">
					<div class="fill-w  margin-t-20">
						<a href="#sheet" id="openSheet">
							<div class="corner-container flex v-center white-color">

								<div id="role" class="flex-1 fill-h text-size flex h-center v-center">
									选择角色
								</div>
								<div class="left text-size">
									图片
								</div>

							</div>
						</a>
					</div>
					<div onclick="next()" class="margin-t-40 login-btn corner-container flex v-center h-center white-color">

						下一步

					</div>
				</div>
				<div id="auths" style="display: none;">
					<div class="fill-w  margin-t-20">
						<div class="flex v-center white-color">

							<div class="flex-1 fill-h text-size flex h-center v-center">
								微信图片
							</div>

						</div>

					</div>
					<div class="margin-t-20 text-center text-size white-color">微信授权登录</div>
					
					<div onclick="auths()" class="margin-t-40 login-btn corner-container flex v-center h-center white-color">

						下一步

					</div>
					<div onclick="before()" class="margin-t-40 login-btn corner-container flex v-center h-center white-color">

						上一步

					</div>
				</div>
			</div>
		</div>
		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(1)" href="#" >老师</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(2)" href="#" >学生</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(0)" href="#sheet1" ><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		<input type="hidden" id="selectNum" value="0" />
		<script src="../js/mui.min.js"></script>
		<script>
			mui.back = function() {
				plus.runtime.quit();
			};
			mui.plusReady(function(){
				
				
			});
			
			function cancle(num){
				mui('#sheet').popover("hide");
				if(num!=0){
					document.getElementById("selectNum").value=num;
					//判断是老师还是学生
					if(num==1){
						document.getElementById("role").innerText="老师";
					}else{
						document.getElementById("role").innerText="学生";
						
					}
				}
				
			}
			function next(){
				
				var num = document.getElementById("selectNum").value;
				if(num==0){
					mui.toast("请先选择角色");
					return;
				}
				document.getElementById("selectRole").style.display="none";
				document.getElementById("auths").style.display="block";
				
			}
			function before(){
				document.getElementById("auths").style.display="none";
				document.getElementById("selectRole").style.display="block";
			}
			function auths(){
				var webview = mui.openWindow({
	    url:'bindphone.html',
	    extras:{
        url:""+plus.webview.currentWebview().id,
    }
	});
			}
		</script>
	</body>

</html>